<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<title>房间详情</title>
<link href="<{$ipath}>minisite/hotel/style/hotel_room.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="bigbox">
	<!--顶部-->
	<div class="topbox">
    	<div>
        	<img src="<{$ipath}>minisite/hotel/images/hotel_01.png">

            <p>客房详情</p>
        </div>
    </div>
    <!--banner-->
    <div class="bannerbox" id="bannerbox">
        <div class="flicking_con">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
        <ul class="picList">
            <li><img src="<{$ipath}>minisite/hotel/images/hotel_banner01.png"></li>
            <li><img src="<{$ipath}>minisite/hotel/images/hotel_banner02.png"></li>
            <li><img src="<{$ipath}>minisite/hotel/images/hotel_banner03.png"></li>
            <li><img src="<{$ipath}>minisite/hotel/images/hotel_banner04.png"></li>
        </ul>
        <a href="javascript:;" id="btn_prev"></a>
        <a href="javascript:;" id="btn_next"></a>
    </div>
    <!--内容区域-->
    <div class="room_information">
    	<div class="information">
        	<p class="infor">房型<span><{$tinfo.name}></span></p>
            <p class="infor">楼层<span><{$tinfo.fname}></span></p>
            <p class="infor">面积<span><{$tinfo.area}></span></p>
            <p class="infor last">其他<span><{$tinfo.rmark}></span></p>
        </div>
    </div>
    <!--便利设备-->
    <div class="convennient_box">
    	<div class="convennient">
        	<p class="title">便利设备</p>
            <ul>
            	<li class="li01"><span>无线网络</span></li>
                <li class="li02"><span>有线网络</span></li>
                <li class="li03"><span>免费停车</span></li>
            </ul>
            <ul class="ul02"> 
            	<li class="li04"><span>行李寄存</span></li>
                <li class="li05"><span>无烟客房</span></li>
                <li class="li06"><span>客房服务</span></li>
            </ul>
        </div>
    </div>
    <!--温馨提示-->
    <div class="prompt_box">
    	<div class="prompt">
        	<p class="title">温馨提示</p>
            <div class="prompt01">
                <p class="p_01">1</p>
                <p class="p_02">请选择您需要的入住时间和离店时间查询房价，不同时间段价格可能不一样；</p>
            </div>
            <div class="prompt01">
                <p class="p_01">2</p>
                <p class="p_02">如您到店时间晚于预订保留时间、或房间紧张时，为确保入住，可能要求您提供信用卡资料进行担保；</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="<{$ipath}>minisite/hotel/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<{$ipath}>minisite/hotel/js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="<{$ipath}>minisite/hotel/js/jquery.touchSlider.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".main_visual").hover(function(){
            $("#btn_prev,#btn_next").fadeIn()
        },function(){
            $("#btn_prev,#btn_next").fadeOut()
        });
        $dragBln = false;

        $(".picList").touchSlider({
            flexible : true,
            speed : 200,
            btn_prev : $("#btn_prev"),
            btn_next : $("#btn_next"),
            paging : $(".flicking_con a"),
            counter : function (e){
                $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
            }
        });

        $(".picList").bind("mousedown", function() {
            $dragBln = false;
        });

        $(".picList").bind("dragstart", function() {
            $dragBln = true;
        });

        $(".picList a").click(function(){
            if($dragBln) {
                return false;
            }
        });
        timer = setInterval(function(){
            $("#btn_next").click();
        }, 5000);

        $(".main_visual").hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            },5000);


            $(".main_image").bind("touchstart",function(){
                clearInterval(timer);
            }).bind("touchend", function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                }, 5000);
            });
        });

    });




</script>
</body>
</html>
